<template>
 <div>
   <Header :seller="seller"/>
   <div class="tab border-bottom">
     <router-link to="/goods"
                  class="tab-item"
                  tag="div">
       商品
     </router-link>
     <router-link to="/ratings"
                  class="tab-item"
                  tag="div">
       评论
     </router-link>
     <router-link to="/seller"
                  class="tab-item"
                  tag="div">
       商家
     </router-link>
   </div>
   <router-view :seller="seller"/>
 </div>
</template>

<script>
  import axios from 'axios'

  import Header from '@/components/mainTab/header/Header'
  export default {
    name: "MainTab",
    components: {
      Header
    },
    data(){
      return {
        seller: {}
      }
    },
    created() {
      axios.get('/mock/data.json').then(res => {
        if(res.data){
          this.seller = res.data.seller;
        }
      })
    }
  }
</script>

<style scoped lang="stylus">
  .tab
    display flex
    width 100%
    height 40px
    line-height 40px
    border-bottom 1px solid rgba(7,17,27,.1)
    position relative
    .tab-item
      flex 1
      text-align center
      font-size 14px
      color rgb(77,85,93)
      &.active
        color rgb(240,20,20)
</style>
